<template>
  <!-- 坞修第一步 -->
  <div class="step1 mt-2">
    <div class="top">
      <div class="flexec">
        <el-button
          type="primary"
          @click="addShipVis = true"
        >
          {{ t(`dockRepair.NewShipsAdded`) }}
        </el-button>
        <el-button
          type="primary"
          @click="handleNext"
          :disabled="!activeId"
        >
          {{ t(`dockRepair.NextStep`) }}
        </el-button>
      </div>
      <div class="flexcc mt-2">
        <div class="bold">
          <span>{{ t(`dockRepair.step1`) }}:</span>
          <span>{{ store.stepDesc }}</span>
        </div>
      </div>
    </div>

    <div class="list mt-2">
      <div
        class="nodata flexcc-col"
        v-if="!listData.length"
      >
        <img
          src="@/assets/img/885bce905fe61e7f3d5cd65851c909d.png"
          height="200"
        />
        {{ t(`dockRepair.msg1`) }}
      </div>
      <div
        :class="['item', { active: activeId === item.id }]"
        v-for="item in listData"
        :key="item"
        @click="setActive(item)"
      >
        <div class="left">
          <img
            :src="item.picture"
            alt=""
          />
        </div>
        <div class="right">
          <div class="title flexsc">
            <div class="a mr-2">{{ item.shippingName }}</div>
            <div class="b flexcc">{{ t(`dockRepair.IMOnumber`) }}:{{ item.shippingNo }}</div>
          </div>
          <div class="attr">
            <div class="item">
              <span>{{ t(`dockRepair.attr1`) }}:</span>
              <span>{{ getDictLabel('ships_type', item.shippingType) }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr2`) }}:</span>
              <span>{{ item.totalLength }}m</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr3`) }}:</span>
              <span>{{ item.yearOfConstruction }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr4`) }}:</span>
              <span>{{ item.nationality }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr5`) }}:</span>
              <span>{{ getDictLabel('classification_society', item.classificationSociety) }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr6`) }}:</span>
              <span>{{ item.portRegistry }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr7`) }}:</span>
              <span>{{ item.shipowner }}</span>
            </div>
            <div class="item">
              <span>{{ t(`dockRepair.attr8`) }}:</span>
              <span>{{ item.shipManagement }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flexcc mt-3">
      <el-pagination
        layout="prev, pager, next"
        :hide-on-single-page="total <= page.pageSize"
        :total="total"
        v-model:current-page="page.pageNum"
        :page-size="page.pageSize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 三个月内有已绑定的坞修单 -->
    <BoundDockRepairOrder
      v-if="dialogHas"
      :visible="dialogHas"
      :orderList="orderList"
      @close="dialogHas = false"
      @handleImport="handleImport"
      @handleCreate="handleCreate"
    />

    <!-- 生成坞修单 -->
    <Create
      v-if="dialogCreate"
      :visible="dialogCreate"
      :shipId="activeId"
      @close="dialogCreate = false"
      @handleContinue="handleContinue"
    />

    <!-- 新增船舶 -->
    <AddShip
      v-if="addShipVis"
      v-model:visible="addShipVis"
      @emitGetList="getList"
    />
  </div>
</template>

<script setup>
import { ref, watch, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useDockRepair from '@/stores/dockRepair.js'
import useLogin from '@/stores/login.js'
import BoundDockRepairOrder from './BoundDockRepairOrder.vue' // 三个月内有已绑定的坞修单
import Create from './Create.vue' // 生成坞修单
import { shippingListApi } from '@/service/shipping.js'
import { autoMateDockBeforeApi } from '@/service/dockOrder'
import useDict from '@/hooks/useDict'
import AddShip from '@/components/AddShip.vue'
import {storeToRefs} from "pinia";

const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()

const shippingId = route.query.shippingId

const { t, locale } = useI18n()

watch(locale, (n) => {
  init()
})

const storeLogin = useLogin()
const store = useDockRepair()
const { setShip, setOrderInfoKey, next } = store
const { orderInfo } = storeToRefs(store);

onBeforeMount(() => {
  init()
})

// 船舶列表
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 10 // 每页条数
})
const total = ref(0) // 总数
const activeId = ref(null) // 选中的船舶
const setActive = (item) => {
  const { id } = item
  setShip(item)
  activeId.value = id
}
// 获取数据
const getList = () => {
  shippingListApi({
    id: shippingId,
    enterpriseId: storeLogin.userInfo.enterpriseId,
    ...page.value
  }).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t

    if (shippingId && rows.length) {
      setShip(rows[0])
      activeId.value = rows[0].id
    }
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 三个月内有已绑定的坞修单
const dialogHas = ref(false)
const orderList = ref([])
const getOrderList = async () => {
  await autoMateDockBeforeApi({
    shippingId: activeId.value
  }).then(({ data }) => {
    orderList.value = data
  })
}

// 生成坞修单
const dialogCreate = ref(false)

// 导入坞修单
const handleImport = (val) => {
  dialogHas.value = false
  setOrderInfoKey('id', val)
  next()
}

// 创建坞修单
const handleCreate = () => {
  dialogHas.value = false
  dialogCreate.value = true
}

// 继续
const handleContinue = () => {
  dialogCreate.value = false
  next()
}

// 下一步
const handleNext = () => {
  const { count, nature, countCn, natureCn, countEn, natureEn } = orderInfo
  if (!count) {
    return ElMessage.warning(t('dockRepair.step2page.w1_1'))
  }
  if (!nature) {
    return ElMessage.warning(t('dockRepair.step2page.w1_2'))
  }

  const { shippingName } = store.ship
  setOrderInfoKey('dockOrderName', `${shippingName}${countCn}${natureCn}`)
  setOrderInfoKey('dockOrderNameEn', `${shippingName}${' '}${countEn}${' '}${natureEn}`)

  getOrderList().then(() => {
    // 如果 三个月内有已绑定的坞修单
    if (orderList.value.length) {
      dialogHas.value = true
    } else {
      dialogCreate.value = true
    }
  })
}

// 新增船舶
const addShipVis = ref(false)

// init
const init = async () => {
  getDictData('ships_type')
  getDictData('classification_society')
  getList()
}
</script>

<style scoped lang="scss">
.step1 {
  padding-bottom: 36px;
  .el-button {
    min-width: 150px;
  }
  .top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1260px;
    padding-top: 30px;
  }

  .list {
    display: grid;
    grid-template-rows: repeat(auto, 240px);
    gap: 23px;
    .nodata {
      min-height: 300px;
      padding: 50px 0;
    }
    > .item {
      background: #fff;
      padding: 28px;
      display: grid;
      grid-template-columns: 272px auto;
      gap: 22px;
      border: 2px solid #fff;
      cursor: pointer;
      transition: 0.3s;
      &.active {
        border-color: var(--mainColor);
      }
      .left {
        width: 272px;
        height: 180px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .right {
        height: 180px;
        display: grid;
        grid-template-rows: 38px auto;
        gap: 27px;
        .title {
          .a {
            font-size: 20px;
            font-weight: bold;
          }
          .b {
            min-width: 180px;
            padding: 0 10px;
            height: 38px;
            background: rgba($color: #3376e5, $alpha: 0.1);
            color: #3376e5;
            border-radius: 4px;
          }
        }
        .attr {
          display: grid;
          grid-template-columns: repeat(2, 50%);
          gap: 15px;
          span {
            font-size: 12px;
            &:first-of-type {
              color: #9d9fa5;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
